<template>
  <div class="gantt-setting">
    <div class="gantt-setting__header flex items-center">Configuration</div>
    <el-radio-group v-model="activeRadio"
                    size="mini"
                    class="gantt-setting__group flex">
      <el-radio-button :label="record.value"
                       v-for="record in radios"
                       :key="record.value"
                       class="flex-1">{{record.label}}</el-radio-button>
    </el-radio-group>
    <template v-if="activeRadio ==='column'">
      <ZCollapse :title="form.group.headerText">
        <template v-slot:action>
          <el-switch v-model="form.group.show"
                     active-color="#13ce66">
          </el-switch>
        </template>

        <el-form label-width="90px"
                 label-position="left">
          <el-form-item label="Mapping to">
            <el-select v-model="form.group.field"
                       clearable>
              <el-option v-for="record in fieldsList"
                         :key="record.name"
                         :label="record.name"
                         :value="record.name"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </ZCollapse>
      <ZCollapse :title="record.headerText"
                 v-for="record in form.columns"
                 :key="record.field">
        <template v-slot:action>
          <el-switch v-model="record.show"
                     active-color="#13ce66">
          </el-switch>
        </template>

        <el-form label-width="90px"
                 label-position="left">
          <el-form-item label="Mapping to">

            <el-select v-model="record.field"
                       clearable>
              <el-option v-for="record in fieldsList"
                         :key="record.name"
                         :label="record.name"
                         :value="record.name"></el-option>
            </el-select>

            <!-- <template v-if="record.taskField === 'startDate' || record.taskField === 'endDate'">
              <BFormatDate v-model="record.format" />
            </template> -->

          </el-form-item>
        </el-form>
      </ZCollapse>

    </template>

    <template v-else>
      <ZCollapse title="Top tier">
        <template v-slot:action>
          <el-switch v-model="form.topTier.show"
                     active-color="#13ce66">
          </el-switch>
        </template>

        <el-form label-width="60px"
                 label-position="left">
          <el-form-item label="Count">
            <el-input-number v-model="form.topTier.count"
                             controls-position="right"
                             :min="1"></el-input-number>
          </el-form-item>
          <el-form-item label="Unit">
            <el-select v-model="form.topTier.unit"
                       clearable>
              <el-option v-for="record in units"
                         :key="record.value"
                         :label="record.label"
                         :value="record.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="Format">
            <el-select v-model="form.topTier.format"
                       clearable>
              <el-option v-for="record in topFormats"
                         :key="record.value"
                         :label="record.label"
                         :value="record.value"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </ZCollapse>
      <ZCollapse title="Bottom tier">
        <template v-slot:action>
          <el-switch v-model="form.bottomTier.show"
                     active-color="#13ce66">
          </el-switch>
        </template>

        <el-form label-width="60px"
                 label-position="left">
          <el-form-item label="Count">
            <el-input-number v-model="form.bottomTier.count"
                             controls-position="right"
                             :min="1"></el-input-number>
          </el-form-item>
          <el-form-item label="Unit">
            <el-select v-model="form.bottomTier.unit"
                       clearable>
              <el-option v-for="record in units"
                         :key="record.value"
                         :label="record.label"
                         :value="record.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="Format">
            <el-select v-model="form.bottomTier.format"
                       clearable>
              <el-option v-for="record in bottomFormats"
                         :key="record.value"
                         :label="record.label"
                         :value="record.value"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </ZCollapse>
    </template>

  </div>
</template>

<script>
import ZCollapse from '@/components/storybook/z-collapse'
import BFormatDate from '@/components/storybook/b-format/b-format-date'
import { radios, units, topFormats, bottomFormats, initialValue } from './index.schema'
import { merge, cloneDeep } from 'lodash'
export default {
  name: 'GanttSetting',
  components: {
    ZCollapse,
    BFormatDate
  },
  props: {
    fieldsList: true,
    dataInfo: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      radios,
      units,
      topFormats,
      bottomFormats,
      activeRadio: 'column',
      form: merge(cloneDeep(initialValue), this.dataInfo.gadgetSetting)
    }
  },
  computed: {
    times () {
      return this.fieldsList.filter(i => i.type === 'datetime')
    }
  },
  watch: {
    form: {
      handler (data) {
       
        this.dataInfo.gadgetSetting = data
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    getData () {
      return this.form
    }
  }

}
</script>

<style lang="scss" scoped>
.gantt-setting {
  &__header {
    height: 48px;
    box-shadow: inset 0px -1px 0px 0px #f0f0f0;
    font-size: 16px;
    color: #404040;
    font-weight: 700;
  }
  &__group {
    padding: 16px 0;
    ::v-deep .el-radio-button__inner {
      width: 100%;
    }
  }
}
.el-form-item {
  margin-bottom: 16px !important;
  &:last-of-type {
    margin-bottom: 0 !important;
  }

  ::v-deep .el-form-item__content {
    display: flex;
    align-items: center;
    img.el-popover__reference {
      margin-left: 4px;
      margin-bottom: 4px;
    }
  }
  .el-input-number.is-controls-right {
    display: block;
    width: auto;
    ::v-deep .el-input-number__increase {
      line-height: 15px;
    }
    ::v-deep .el-input__inner {
      text-align: left;
    }
  }
  .el-select {
    display: block;
  }
}
</style>
